<template>
  <div class="box">
    <div class="f1">
      <ul v-show="status != 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组34.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>财税数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组36.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
      <!-- 从列表进入进度条 -->
      <ul v-show="status == 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span style="margin-left: -10px">企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组36.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>海关数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/005.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <!-- 2.表格 -->
      <div class="notNull">
        <el-table
          :data="applyData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#EBEDED',
            color: '#4D4D4D',
          }"
        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="3%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="资料名称"
            min-width="15%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="yszkje"
            label="文件状态"
            min-width="4%"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" min-width="8%" align="center">
            <template #default="scope">
              <span class="span" type="text" size="small">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :name="num"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                >
                  <span
                    @click="aaa(scope.$index)"
                    class="file"
                    size="small"
                    type="primary"
                    >上传</span
                  >
                </el-upload>
              </span>
              <span
                @click="examine(scope.$index, applyData)"
                class="span"
                v-bind:class="{
                  disable: applyData[scope.$index].yszkje != '已上传',
                }"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="submitBtn()"
          v-if="radio"
          src="@/assets/PC/金融服务/组38.png"
          alt=""
        />
        <img
          @click="submitBtn()"
          v-else
          src="@/assets/PC/金融服务/组39.png"
          alt=""
        />
        <span> 阅读并同意 </span>
        <a @click="submitBtn()">《企业授权协议》、</a>
        <a @click="submitBtn()">《技术服务协议》</a>
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <!-- <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div> -->
        <button @click="lastStep" :disabled="isLock" class="btn btn3">
          上一步
        </button>
        <button
          @click="nextStep"
          class="btn btn3"
          :class="{ active: btn, actives: submitMessage == '提交中' }"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- ----------------------------------------------------------------------------- -->
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      v-model="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="item in list"
              :key="item.url"
              :label="item.name"
              :name="item.names"
            >
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <!-- <div slot="footer" class="dialog-footer">
        <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">
          去签署
        </button>
      </div> -->
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button
            v-if="contractStatuss"
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="aaaa"
          >
            确定
          </button>
          <button
            v-else
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="sign"
          >
            去签署
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title=""
      v-model="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>签署短信已发送至经办人手机{{ getPhone(operatetel) }}、</p>
        <p>法定代表人手机{{ getPhone(officertel) }}，</p>
        <p>请点击短信签署链接完成签署操作。</p>
      </div>
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn2" @click="aaaa">确定</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  base,
  getFilePath,
  myPostFetch,
  Contract,
  Contracts,
  createContractReview,
} from "@/utils";
import { desensitization } from "@/utils/filters.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      submitMessage: "下一步",
      status: "", //判断是从列表进入还是从表格进
      applyid: "",
      zhapplyid: "",
      num: "1",
      isLock: false,
      radio: false,
      // 申请文件表格数据
      applyData: [
        {
          number: 1,
          name: "当期年度报表",
          yszkje: "未上传",
        },
        {
          number: 2,
          name: "上期年度报表",
          yszkje: "未上传",
        },
        {
          number: 3,
          name: "最近一期月报",
          yszkje: "未上传",
        },
      ],
      // 合同签署
      QYSQreportUrl: "",
      JSFWreportUrl: "",
      activeName: "first", //标签页默认
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      disabled: false,
      officertel: "", //法人手机号
      operatetel: "", //经办人手机号
      loading: true,
      list: null,
      btn: false, //提交按钮是否可用状态变量
      procedureId: "", // 从路由地址中获取产品ID,保存到状态变量中
      flowId: "",
      // 合同签署数据
      contract: {
        applyid: "",
        entname: "",
        FRaccountid: "",
        inputdate: "",
        JBRaccountid: "",
        licenseno: "",
        mainindname: "",
        officer: "",
        officertel: "",
        ORGaccountid: "",
        productcode: "",
        radio: "",
        ticketadder: "",
        ticketbank: "",
        ticketbankno: "",
        tickethead: "",
        ticketno: "",
        tickettel: "",
        signday: "",
        step: "apply",
      },
      contractStatuss: true,
    };
  },

  mounted() {
    this.applyid = sessionStorage.getItem("applyid");
    localStorage.getItem("zhapplyid")
      ? (this.zhapplyid = localStorage.getItem("zhapplyid"))
      : "";
    this.contract.productcode = localStorage.getItem("productcode");
    this.status = this.$route.query.status;
    this.getFilePath();
    this.getTime();
  },
  methods: {
    //手机号脱敏
    getPhone(value) {
      return desensitization(value);
    },
    // 获取当前时间
    getTime() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds(); //秒
      var weekArr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.contract.signday =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds;
    },
    aaa(index) {
      this.num = index + "";
    },

    // 下一步
    lastStep() {
      this.$router.go(-1);
    },
    // 下一步
    nextStep() {
      if (this.submitMessage == "提交中") return;
      if (!this.radio) return ElMessage.error("请勾选协议");
      this.submitMessage = "提交中";
      let url = "/api/hubeibusienss/CKBLRZHXbutton";
      let params = {
        applyid: this.applyid,
        zhapplyid: this.zhapplyid,
      };
      myPostFetch(url, params).then((res) => {
        if (res.msg == "ok") {
          localStorage.removeItem("zhapplyid");
          sessionStorage.removeItem("applyid");
          this.status
            ? this.$router.push("/gsebzsApply3?status=lbzs")
            : this.$router.push("/gsebzsApply3");
          this.submitMessage = "下一步";
        } else {
          ElMessage.error("提交失败");
          this.submitMessage = "下一步";
        }
      });
    },
    // 获取文件
    async getFilePath() {
      let res = await getFilePath(this.applyid);
      let data = res.data;
      data.forEach((item) => {
        if (item.name == "当期年度报表") {
          this.applyData[0].yszkje = "已上传";
          this.applyData[0].path = item.path;
          this.applyData[0].filetype = item.filetype;
        } else if (item.name == "上期年度报表") {
          this.applyData[1].yszkje = "已上传";
          this.applyData[1].path = item.path;
          this.applyData[1].filetype = item.filetype;
        } else if (item.name == "最近一期月报") {
          this.applyData[2].yszkje = "已上传";
          this.applyData[2].path = item.path;
          this.applyData[2].filetype = item.filetype;
        }
      });
    },
    // 查看
    examine(index, data) {
      if (data[index].yszkje == "未上传") return;
      let val = data[index];
      let name = val.filetype;
      let imgUrlStr = val.path;
      if (name == "jpg" || name == "png") {
        const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute("target", "_blank");
        a.href = val.path;
        a.click();
      } else {
        fetch(imgUrlStr).then((res) =>
          res.blob().then((blob) => {
            const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = val.name;
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
          })
        );
      }
    },
    //文件上传
    uploading(file, newfilename) {
      let formData = new FormData();
      formData.append("file", file.raw);
      let url =
        base +
        `/api/hubeibusienss/GSBHZSKJApplysc?objecttype=BusienssFile&applyid=${this.applyid}&newfilename=${newfilename}`;
      this.axios
        .post(url, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            "x-auth": localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.msg == "ok") {
            this.getFilePath();
            ElMessage.success("文件上传成功");
          } else {
            ElMessage.error("文件上传失败，请检查文件信息");
          }
        });
    },
    // 文件上传
    handleChange(file, fileList) {
      let index = this.num;
      let newfilename = "";
      if (index == 0) {
        newfilename = "当期年度报表";
        this.uploading(file, newfilename);
      } else if (index == 1) {
        newfilename = "上期年度报表";
        this.uploading(file, newfilename);
      } else if (index == 2) {
        newfilename = "最近一期月报";
        this.uploading(file, newfilename);
      }
    },
    //自定义上传文件
    uploadFile(file) {
      return;
    },
    // 合同签署
    // 点击去签署按钮
    async sign() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 4000);
      this.loading = true;
      let data = await Contract(this.contract);
      if (data.code == 100) {
        this.loading = false;
        this.radio = true;
        this.submitBtns();
        this.showAgreementVisible = false;
        this.hintVisible = true;
        this.flowId = data.data.flowId;
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.radio = true;
      this.showAgreementVisible = false;
      this.submitBtns();
      this.hintVisible = false;
    },
    // 点击勾选协议按钮
    async submitBtn() {
      if (this.radio) this.radio = !this.radio;
      this.loading = true;
      this.showAgreementVisible = true;
      let productcode = this.contract.productcode;
      let parameter = {
        productcode: productcode,
        acceptor: localStorage.getItem("entname"),
      };
      let data = await Contracts(parameter);
      if (data.code != 100) {
        this.showAgreementVisible = false;
        ElMessage.error("产品编号未进行模板配置，请联系管理员进行配置");
        this.loading = false;
        return;
      }
      this.officertel = data.data.ent.fincerttel;
      this.operatetel = data.data.ent.operateTel;
      this.contract.entname = data.data.ent.entname;
      this.contract.FRaccountid = data.data.ent.fraccountid;
      this.contract.inputdate = data.data.ent.inputdate;
      this.contract.JBRaccountid = data.data.ent.jbRaccountid;
      this.contract.licenseno = data.data.ent.licenseno;
      this.contract.mainindname = data.data.ent.mainindname;
      this.contract.officer = data.data.ent.operatename;
      this.contract.officertel = data.data.ent.fincerttel;
      this.contract.ORGaccountid = data.data.ent.qyaccountid;
      this.contract.applyid = this.applyid;
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = "");
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = "");
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = "");
      this.contract.radio = data.data.radio;

      let GetcreateContractReview = await createContractReview(this.contract);
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss;
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data;
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == "企业授权协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "first";
              this.activeName = "first";
            } else if (this.list[i].name == "技术服务协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "second";
              this.activeName = "second";
            }
          }
          this.loading = false;
        } else {
          this.list = GetcreateContractReview.data.data.file;
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == "企业授权协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "first";
              this.activeName = "first";
            } else if (this.list[i].name == "技术服务协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "second";
              this.activeName = "second";
            }
          }
          this.loading = false;
        }
      } else {
        this.showAgreementVisible = false;
        ElMessage.error("产品编号未进行模板配置，请联系管理员进行配置");
      }
      this.submitBtns();
    },
    submitBtns() {
      if (this.radio) {
        this.btn = true;
      } else {
        this.btn = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          display: flex;
          align-items: center;
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 180px;
            height: 3px;
            background-color: #dbdbdb;
            margin: 0 8px;
          }
          .zssq {
            width: 110px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 20px 25px;
    margin-top: 5%;
    width: 100%;
    .notNull {
      width: 100%;
      // 新增按钮
      .newly {
        display: flex;
        width: 140px;
        margin: 30px 1px;
        h4 {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 8px;
          cursor: pointer;
        }
        h5 {
          width: 46px;
          height: 20px;
          background: #3f6ef2;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          margin-left: 5px;
          margin-top: 1px;
          cursor: pointer;
        }
      }

      // 表格编辑/查看
      .span {
        display: inline-block;
        // width: 30px;
        height: 24px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #3f6ef2;
        border-bottom: 1px solid #3f6ef2;
        cursor: pointer;
        margin-right: 10px;
      }
      .disable {
        color: #aaa;
        border-bottom: 1px solid #aaa;
      }
    }
    // 服务协议
    .agreement {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 25px;
      text-align: center;
      margin-top: 10px;
      user-select: none;
      span {
        font-size: 14px;
        color: #666;
        margin-left: 7px;
      }
      img {
        width: 15px;
        height: 15px;
        cursor: pointer;
      }
      a {
        cursor: pointer;
        font-size: 14px;
        color: #3f6ef2;
      }
    }
    // 按钮组
    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      margin: 5px 0 5px 0;
      cursor: pointer;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 34px;
        background: #3f6ef2;
        border-radius: 4px;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 300;
        color: #ffffff;
        margin-right: 30px;
      }
      .btn1 {
        background-color: #bfbfbf;
      }
      // 提交按钮
      .btn3 {
        background-color: #ccc;
        &.active {
          background-color: #3f6ef2;
        }
        &.actives {
          background-color: rgba(10, 123, 224, 0.6);
        }
      }
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  // -------------------------------------------------------------------------------
  // 弹出框
  .dialog-center {
    box-sizing: border-box;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 520px;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 520px;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 660px;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 600px;
        height: 460px;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 600px;
        height: 460px;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 760px;
        height: 580px;
      }

      background-color: #fff;

      h1 {
        font-size: 18px;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    flex-wrap: wrap;
    p {
      margin-bottom: 15px;
    }
  }
}
::v-deep(.hint .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 56%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 49%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 40%;
    // background-color: #f00;
  }
}
// 协议
::v-deep(.inviteAffirmClient .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
::v-deep(.el-dialog__header) {
  border: 0;
  padding: 5px 20px;
}
::v-deep(.el-upload-list) {
  display: none;
}
</style>
